<!-- 首页专栏入口 -->
<template>
  <div class="app-container">
    <el-button type="primary" @click="add">添加运营专栏</el-button>
    <el-table
      :row-key="id"
      :data="tableData"
      style="width:100%;margin-top:10px;color:black;"
      size="small"
      fit
      highlight-current-row
    >
      <el-table-column label="专栏图标" min-width="100px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="专栏标题" min-width="100px" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="专栏小标题" min-width="100px" align="center">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.date }}</span>
        </template>
      </el-table-column>

      <el-table-column label="专栏商品" min-width="200px" align="center">
        <template slot-scope="scope" style="display:flex; justify-content:space-around">
          <div class="demo-image_preview">
            <el-image style="width: 100px; height: 100px" :src="url" lazy></el-image>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作" min-width="100px" align="center">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">撤栏</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog append-to-body="true" title="添加运营专栏" :visible.sync="dialogVisible" width="70%">
      <div>
        <el-form
          ref="ruleForm"
          :model="temp"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="专栏标题：" prop="region">
            <el-input v-model="ruleForm.title" style="width:200px" size="small"></el-input>
          </el-form-item>
          <el-form-item label="专栏小标题：" prop="region">
            <el-input v-model="ruleForm.title" style="width:200px"></el-input>
          </el-form-item>

          <el-form-item label="标题图标：" prop="region">
            <el-upload
              width="80px"
              :on-preview="handlePictureCardPreview"
              :before-remove="handleBeforeRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :headers="headers"
              :file-list="fileList"
              :action="imagesUploadApi"
              list-type="picture-card"
            >
              <i class="el-icon-plus" />
            </el-upload>
          </el-form-item>
          <el-form-item label="板块商品" prop="region">
            <el-input v-model="ruleForm.title" style="width:200px"></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-dialog>
    <el-dialog append-to-body="true" title="提示" :visible.sync="deleteVisible" width="30%">
      <span>是否将此栏目从APP首页撤下？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
import Sortable from "sortablejs";
export default {
  data() {
    return {
      components: {
        draggable,
        Sortable
      },
      dragOptions: {
        animation: 120,
        scroll: true,
        group: "sortlist",
        ghostClass: "ghost-style"
      },
      ruleForm: {
        title: "大标题",
        smallTitle: "",
        url: ""
      },
      mounted() {
        // 表格拖拽事件的添加
        const el = document.querySelectorAll(
          ".el-table__body-wrapper > table > tbody"
        )[0];
        let self = this;
        Sortable.create(el, {
          // 拖拽结束后的操作
          onEnd({ newIndex, oldIndex }) {
            // 修改data中的数组，
            const targetRow = self.tableData.splice(oldIndex, 1)[0];
            self.tableData.splice(newIndex, 0, targetRow);
          }
        });
      },
      dialogVisible: false,
      deleteVisible: false,
      input: "",
      url:
        "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      tableData: [
        {
          id: 1,
          date: "2016-05-02",
          name: "王1虎",
          address: "上海市普陀区金沙江路 1518 弄",
          url:
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571216138884&di=b1a08e8b63723313a75abddb46eef2b5&imgtype=0&src=http%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farticle%2F7ada6f41747abed96318d691828545c7c8378df2.jpg",
          srcList: [
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571216113473&di=3f5dae098e5402d3b7c45cc04ee4c286&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201705%2F16%2F20170516151310_BeLaR.png",
            "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571810919&di=17c51eb4061739711089ef9fa8d19ac2&imgtype=jpg&er=1&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fwallpaper%2F1306%2F09%2Fc1%2F21864701_1370768088966.jpg"
          ]
        },
        {
          id: 2,
          date: "2016-05-04",
          name: "王2虎",
          address: "上海市普陀区金沙江路 1517 弄",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
          ]
        },
        {
          id: 3,
          date: "2016-05-01",
          name: "王3虎",
          address: "上海市普陀区金沙江路 1519 弄",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
          ]
        },
        {
          id: 4,
          date: "2016-05-03",
          name: "王5虎",
          address: "上海市普陀区金沙江路 1516 弄",
          url:
            "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
          srcList: [
            "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
            "https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg"
          ]
        }
      ]
    };
  },
  methods: {
    add() {
      console.log("添加运营专栏");
    },
    handleEdit(index, row) {
      console.log(index, row);
      this.dialogVisible = true;
    },
    handleDelete(index, row) {
      console.log(index, row);
      this.deleteVisible = true;
    }
  }
};
</script>

